<template>
  <el-dialog title="系统日志"  v-model="dialogVisible" width="1000">
    <el-tabs v-model="activeTab">
      <!-- 系统日志 tab -->
      <el-tab-pane label="系统日志" name="systemLog">
        <div class="filter-container">
          <el-date-picker
            v-model="systemLogQuery.dateRange"
            type="datetimerange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="YYYY-MM-DD HH:mm:ss"
           
          />
          <el-button style="margin-left: 10px;" type="primary" @click="handleSystemLogSearch">查询</el-button>
        </div>

        <el-table :data="systemLogs" v-loading="systemLogLoading">
          <el-table-column prop="createTime" label="日期" width="180" />
          <el-table-column prop="opermac" label="MAC地址" width="200" />
          <el-table-column prop="operip" label="IP地址" width="120" />
          <el-table-column prop="opertype" label="操作类型" width="80" />
          <el-table-column prop="operinfo" label="内容"/>
        </el-table>

        <el-pagination
          class="pagination"
          @size-change="handleSystemLogSizeChange"
          @current-change="handleSystemLogCurrentChange"
          :current-page="systemLogQuery.page"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="systemLogQuery.size"
          layout="total, sizes, prev, pager, next"
          :total="systemLogTotal"
        />
      </el-tab-pane>

      <!-- 备份记录 tab -->
      <el-tab-pane label="备份记录" name="backupLog">
        <el-table :data="backupLogs" v-loading="backupLogLoading">
          <el-table-column prop="createTime" label="时间" width="180" />
          <el-table-column prop="operinfo" label="状态" />
        </el-table>

        <el-pagination
          class="pagination"
          @size-change="handleBackupLogSizeChange"
          @current-change="handleBackupLogCurrentChange"
          :current-page="backupLogQuery.page"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="backupLogQuery.size"
          layout="total, sizes, prev, pager, next"
          :total="backupLogTotal"
        />
      </el-tab-pane>
    </el-tabs>
  </el-dialog>
</template>

<script setup>
import { ref, watch,computed } from 'vue'
import { ElMessage } from 'element-plus'
import request from '@/utils/request'

// Props
const props = defineProps({
  modelValue: {
    type: Boolean,
    default: false
  }
})

// Emits
const emit = defineEmits(['update:modelValue'])
const dialogVisible = computed({
  get: () => props.modelValue,
  set: (value) => emit('update:modelValue', value)
})

// 响应式状态
const activeTab = ref('systemLog')
// 系统日志相关数据
const systemLogs = ref([])
const systemLogLoading = ref(false)
const systemLogTotal = ref(0)
const systemLogQuery = ref({
  page: 1,
  size: 10,
  dateRange: []
})

// 备份记录相关数据
const backupLogs = ref([])
const backupLogLoading = ref(false)
const backupLogTotal = ref(0)
const backupLogQuery = ref({
  page: 1,
  size: 10
})

// 监听器
watch(() => props.modelValue, (val) => {
  if (val) {
    // 清除数据
    systemLogs.value = []
    systemLogTotal.value = 0
    backupLogs.value = []
    backupLogTotal.value=0
    systemLogQuery.value = {
      page: 1,
      size: 10,
      dateRange: []
    }
    backupLogQuery.value = {
      page: 1,
      size: 10
    }
    // 加载新数据
    // loadData()
  }
}, { immediate: false })

watch(activeTab, () => {
  if (props.modelValue) {
    loadData()
  }
})

// 方法
const loadData = async () => {
  if (activeTab.value === 'systemLog') {
    await fetchSystemLogs()
  } else {
    await fetchBackupLogs()
  }
}

// 系统日志相关方法
const fetchSystemLogs = async () => {
  systemLogLoading.value = true
  try {
    const [startDate, endDate] = systemLogQuery.value.dateRange || []
    const { data } = await request.post(`/zhsj/api/viewlog`,null,{params: {
      pageindex: systemLogQuery.value.page - 1,
      pagesize: systemLogQuery.value.size,
      viewtype: '',
      dtstart: startDate,  // 使用完整的日期时间
      dtend: endDate      // 使用完整的日期时间
    }})
    systemLogs.value = data.records
    systemLogTotal.value = data.total
  } catch (error) {
    console.error('获取系统日志失败:', error)
    ElMessage.error('获取系统日志失败')
  } finally {
    systemLogLoading.value = false
  }
}

const handleSystemLogSearch = () => {
  systemLogQuery.value.page = 1
  fetchSystemLogs()
}

const handleSystemLogSizeChange = (val) => {
  systemLogQuery.value.size = val
  fetchSystemLogs()
}

const handleSystemLogCurrentChange = (val) => {
  systemLogQuery.value.page = val
  fetchSystemLogs()
}

// 备份记录相关方法
const fetchBackupLogs = async () => {
  backupLogLoading.value = true
  try {
    const { data } = await request.post(`/zhsj/api/viewlog?pageindex=${systemLogQuery.value.page-1}&pagesize=${systemLogQuery.value.size}&viewtype=系统`)
    backupLogs.value = data.records
    backupLogTotal.value = data.total
  } catch (error) {
    console.error('获取备份记录失败:', error)
    ElMessage.error('获取备份记录失败')
  } finally {
    backupLogLoading.value = false
  }
}

const handleBackupLogSizeChange = (val) => {
  backupLogQuery.value.size = val
  fetchBackupLogs()
}

const handleBackupLogCurrentChange = (val) => {
  backupLogQuery.value.page = val
  fetchBackupLogs()
}
</script>

<style scoped>
.filter-container {
  margin-bottom: 20px;
  align-items: center;
}
.pagination {
  margin-top: 20px;
  text-align: right;
}
</style>
